<script setup>
import { ref, provide } from 'vue';
import Child from './components/Child.vue';
// 使用 provide 提供数据/方法，只要后代都能获取到
// provide/inject 依赖注入，语法和 localStorage 非常相似
/* 
使用场景尴尬：
1. 只能用在跨层级通信，兄弟组件没办法使用，实际工作中，更倾向使用 全局状态管理
2. 虽然可以传递 响应式的数据，但是会帮我们结构了 ref 对象，但是数据显得比较混乱
*/

const money = ref(10000);
provide('money', money);

const add = () => {
  money.value += 1000;
};
provide('add', add);
</script>

<template>
  <div>
    我是父组件 - {{ money }}
    <Child></Child>
  </div>
</template>
